<template>
	<view class="main-content">
		<index-header></index-header>
		<view class="content">
			<!-- 列表部分 -->
			<view class="act_lists">
				<ul>
					<navigator  url='/pages/activity/detail'>
					<li v-for="i in 8" :key="i">
						<view class="act_t">
						<view class="img">
							<image src="../../static/img/home/banner.png" mode=""></image>
							<!-- <span class="on">进行中</span> -->
						</view>
						<view class="act_info">
							<p>“AECORE杯”数字孪生应用大赛</p>
							<p><image style="width: 30upx;height: 30upx;margin-right: 10upx;" src="../../static/img/time.png"></image>
						</image>2020.11.26-2021.04.30</p>
							<p>
							<image style="width: 30upx;height: 30upx;float: left;top: 10upx;margin-right: 10upx;" src="../../static/img/location.png"></image>
							
							
							<span>1200元</span>
							<span style="font-size: 22upx;color: #777;margin-top: 24upx;">
							线上活动
							</span></p>
						</view>
						</view>
						<view class="textline">
							
						</view>
						<view class="type textline-1">
							<span>竞赛活动</span>
							<span>智慧城市</span>
							<span>GIS</span>
						</view>
					</li>
					</navigator>
				</ul>
			</view>
		</view>	
	<view-tabbar :current="2"></view-tabbar>
		</view>
	</template>
	
	<script>
		import Tabbar from '@/components/bottomNav.vue'
		export default {
			components:{
				 'view-tabbar': Tabbar,
			},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.content {
	    width: 750upx;
	    height: auto;
	    padding-top: 108upx;
		min-height: calc(100% - 631upx);
	}
	.search_line{
		padding: 30upx;
		position: relative;
		height: 60upx;
		line-height: 30px;
	}
	input{
		font-size: 18upx;
		color: black;
		line-height: 28upx;;
		height: 100%;
		// position: absolute;
		left: 20upx;
		font-size: 20upx;
	}
	.aui-search {
	    background-color: #F4F4F4;
	    width: 75%;
	    height: 60upx;
		line-height: 60upx;
		display: inline-flex;
		margin-left: 40upx;
		float: right;
		
	}
	// .act_lists{
	// // margin-top: 120upx;
	// padding: 20upx;
	
	// }
	.act_lists ul{
		padding-inline-start: 0!important;
	}
	.act_lists li{
		border-bottom: 16upx solid #e7ebf6;
		list-style: none;
		height: 290upx;
		// margin-bottom: 100upx;
	}
	.act_lists .img{
		width: 40%;
		float: left;
		// padding: 20upx;
		
	}
	.act_info{
		width:55%;
		float:right
	}
	.act_info p:nth-child(1){
		font-size: 24upx;
	}
	.act_info p:nth-child(2){
		font-size: 22upx;
		color: #777;
		margin-top: 24upx;
	}
	.act_info span:nth-child(1){
		font-size: 22upx;
		color: #777;
		float: left;
		// display: ;
	}
	.act_info span:nth-child(2){
		font-size: 22upx;
		color: #1296db;
		float: right;
	}
	.act_lists .img>image{
		width: 100%;
		height: 150upx;
	}
	.type {
	    margin: 20upx;
		// margin-top: 20upx;   
	}
	.textline-1 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.textline-1 span {
		color:  #1296db;
		border-radius: 5upx;
		font-size: 14upx;
		border: 2upx solid #1296db;
		padding: 6upx;
		margin: 0 4upx ;
	}
	.textline{
		border: 1upx solid #f5f6f9;
		margin: 0 10px;
	}
	.act_t{
		height: 160upx;
		padding: 20upx;
	}
	.img{
		position: relative;
	}
	.img span{
		    position: absolute;
		    background: rgba(170, 170, 170, 0.5);
		    color: #fff;
		    display: inline-block;
		    left: 0;
		    top: 0;
		    padding: 2px 5px;
		    font-size: 12px;
	}
	.img span.on{
		    background: rgba(1, 131, 255, 0.8);
	}
	ul{
		padding-bottom: 120upx;
	}
</style>
